<template>
  <div class="listDemo flex">
    <div class="common_modal mainTreeBox flex-shrink0" v-show="treeModalShow">
      <div class="common_title">
        <span>组织结构</span>
        <div class="common_title_right">
          <span
            class="icon el-icon-arrow-down operTreeNode"
            :class="showAllNode ? 'up' : ''"
            @click="showAllTreeNode"
          ></span>
          <span class="icon el-icon-refresh" @click="loadTreeData"></span>
        </div>
      </div>
      <div class="treeBox">
        <el-tree
          v-if="refreshTable"
          :data="treeData"
          node-key="id"
          :default-expand-all="showAllNode"
          :default-expanded-keys="defaultShowNodes"
          :props="defaultProps"
          @node-click="chooseNode"
        >
        </el-tree>
      </div>
    </div>
    <div class="common_modal flex-1 list_modal">
      <div class="showTreeModal" @click="operTreeShow">
        <span class="iconfont" :class="treeModalShow?'icon-shouqi':'icon-zhankai'"></span>
      </div>
      <search-box @search="searchForm">
        <div slot="rightBtn" class="right flex-1 text_right">
          <el-button type="success" @click="addUser">新增</el-button>
        </div>
        <el-form
          slot="searchMain"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </search-box>
      <div class="listBox m_t_15">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="headCell"
        >
         <el-table-column v-for="(item,ind) in tableColumns" :key="ind" :label="item.label" :prop="item.name" :width="item.width">
            <!-- <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row[item.name] }}</span>
            </template> -->
          </el-table-column> 
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          class="pageBox"
          :page-size="pageObj.pageSize"
          :total="pageObj.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBox from "@/components/searchBox.vue";
import {BaseData} from './userList.js';
export default {
  components: {
    SearchBox,
  },
  data() {
    const _data = new BaseData();
    return {
      formInline: {
        user: "",
        region: "",
      },
      headCell: {
        background: "#f8f8f8",
      },
      pageObj:{
         pageSize: 10,
         pageNum:1,
         total:0,
      },
     
      tableData: [],
      tableColumns:_data.columns,
      defaultProps: {
        children: "children",
        label: "title",
      },
      treeData: _data.treeData,
      treeModalShow:true,
      //树节点展示刷新
      refreshTable: true,
      //展开所有节点
      showAllNode: true, 
      //默认展开节点
      defaultShowNodes: [],
    };
  },
  mounted() {
      this.$nextTick(()=>{
          this.initData();
          this.getTreeList();
      })
  },
  methods: {
    searchForm(obj) {},
    initData(){
        const _this = this;
        const params = {
          admin:true,
          pageSize:this.pageObj.pageSize,
          pageNum:this.pageObj.pageNum
        }
        this.$request({url:'userList',method:'POST',params,}).then(res=>{
            const _data = res.data||{};
            _this.tableData = _data.list;
            _this.pageObj.total = _data.total
        })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      const _this = this;
       this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$request({url:{name:'userDelete',params:{userCode:row.userCode}},method:'GET',}).then(res=>{
            console.log(res);
            if(res.success){
              this.$message({
                message: "操作成功！",
                type: "success",
              });
              _this.initData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      console.log(index, row);
    },
    currentChange(val) {
      //根据当前页去加载数据
      console.log(`当前页: ${val}`);
      this.pageObj.pageNum = val;
      this.initData();
    },
    /**选择组织结构 */
    chooseNode(obj) {
      console.log(obj);
    },
    /**展示全部节点 */
    showAllTreeNode() {
      this.refreshTable = false;
      if (this.showAllNode) {
        this.showAllNode = false;
      } else {
        this.showAllNode = true;
      }
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    /**刷新树节点数据 */
    loadTreeData() {
      this.getTreeList();
      this.$message({
        message: "刷新树数据",
        type: "success",
      });
    },
    /**控制数的显示与隐藏 */
    operTreeShow(){
      this.treeModalShow = !this.treeModalShow
    },
    /**组织结构 */
    getTreeList(){
      const _this = this;
      this.$request({url:{name:'deptTree',params:{isAll:true,}},method:'GET',}).then(res=>{
          console.log(res)
          _this.treeData = res
      })
    },
    addUser(){
       this.$router.push({ path: '/system/userAdd'});
    },
  },
};
</script>

<style lang="less" scoped>
.mainTreeBox {
  margin-right: 15px;
  width: 200px;
  .treeBox {
    margin-top: 15px;
  }
  .operTreeNode {
    transition: all 0.3s;
    &.up {
      transform: rotate(180deg);
    }
  }
}
.list_modal{
  width: 50%;
}
.showTreeModal{
  position: absolute;
  left:-14px;
  top:30%;
  color:#E6A23C;
  cursor: pointer;
}
</style>
